Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(navbar): various navbar spacing tweaks #2855

Merged
merged 7 commits into from
Aug 30, 2024
Merged

feat(navbar): various navbar spacing tweaks #2855

merged 7 commits into from
Aug 30, 2024

Conversation

andipaetzold
Copy link
Contributor

@andipaetzold andipaetzold commented Aug 29, 2024 •
edited
Loading

Purpose of PR

This PR makes the navbar more consistent, also changes the spacing/sizes to be closer to the designs.

General:

  • All navbars have a height of 60px now

Regular navbar

  • All items have a total height of 28px. (Avatar has 24px, but will have 28px with the planned border)
  • Fixed padding-right for icon-items with menus
  • Icon buttons are closer together in the designs. But wit the 44px click size, we can't bring them any closer
  • Icon buttons are square now

Loading

  • Increased skeleton text height

Mobile menu button:

  • Reduced height to 36px
  • Reduced horizontal padding

It's best to check chromatic for the detailed changes

PR Checklist

  • I have read the relevant readme.md file(s)
  • All commits follow our Git commit message convention
  • Tests are added/updated/not required
  • Tests are passing
  • Storybook stories are added/updated/not required
  • Usage notes are added/updated/not required
  • Has been tested based on Contentful's browser support
  • Doesn't contain any sensitive information

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Aug 29, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: d2d4b12

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR 
Some errors occurred when validating the changesets config:
The package "@contentful/f36-components" depends on the ignored package "@contentful/f36-avatar", but "@contentful/f36-components" is not being ignored. Please add "@contentful/f36-components" to the `ignore` option.
The package "@contentful/f36-components" depends on the ignored package "@contentful/f36-image", but "@contentful/f36-components" is not being ignored. Please add "@contentful/f36-components" to the `ignore` option.
The package "@contentful/f36-components" depends on the ignored package "@contentful/f36-header", but "@contentful/f36-components" is not being ignored. Please add "@contentful/f36-components" to the `ignore` option.

@vercel Vercel
Copy link

vercel bot commented Aug 29, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
forma-36 ✅ Ready (Inspect) Visit Preview Aug 30, 2024 2:58pm

@andipaetzold andipaetzold changed the base branch from main to next August 29, 2024 15:58
@github-actions GitHub Actions
Copy link

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
CommonJS 516.97 KB (+277.93% 🔺) 10.4 s (+277.93% 🔺) 1.6 s (+172.63% 🔺) 11.9 s
Module 512.59 KB (+285.34% 🔺) 10.3 s (+285.34% 🔺) 2.1 s (+192.09% 🔺) 12.3 s

@andipaetzold andipaetzold marked this pull request as ready for review August 30, 2024 11:49
@andipaetzold andipaetzold requested review from damann and a team as code owners August 30, 2024 11:49
@andipaetzold andipaetzold requested review from giotiskl and removed request for a team August 30, 2024 11:49
@andipaetzold andipaetzold self-assigned this Aug 30, 2024
@andipaetzold andipaetzold requested review from denkristoffer and cf-remylenoir and removed request for giotiskl August 30, 2024 11:49
@andipaetzold
Copy link
Contributor Author

I updated the PR.

  • The skeleton radius of the switcher is now reduced to 4px. The radius is intentionally different from the non-skeleton element. The skeleton represents the text. It's different to the buttons and hover states.
  • The skeleton switcher is not focussable anymore
  • The skeleton switcher should not be wrapped with Navbar.Switcher anymore. Just use SwitcherSkeleton directly.

cc @cf-remylenoir

cf-remylenoir
cf-remylenoir approved these changes Aug 30, 2024
View reviewed changes
Copy link
Collaborator

@cf-remylenoir cf-remylenoir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for taking care of this 👍

@andipaetzold andipaetzold merged commit dc9ba87 into next Aug 30, 2024
11 checks passed
@andipaetzold andipaetzold deleted the CFISO-1748 branch August 30, 2024 15:03
This was referenced Sep 12, 2024
Merged
Merged
Merged
Lelith pushed a commit that referenced this pull request Oct 23, 2024
@andipaetzold @Lelith
feat(navbar): various navbar spacing tweaks (#2855)
f502a61 
* feat(navbar): various navbar spacing tweaks

* fix: add box-sizing

* fix: change switcher skeleton radius

* fix: use `SkeletonText` instead of `SkeletonDisplayText`

* fix: do not wrap `SwitcherSkeleton` in `Switcher`

* chore: release new navbar version
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cf-remylenoir cf-remylenoir cf-remylenoir approved these changes

@damann damann Awaiting requested review from damann damann is a code owner

@denkristoffer denkristoffer Awaiting requested review from denkristoffer

Assignees

@andipaetzold andipaetzold

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@andipaetzold @cf-remylenoir